<template>
    <div class="box">
        <headers title="分类"></headers>
        <van-row class="main">
            <!-- 左侧 -->
            <van-col span="6" style="height: 100%;overflow: auto;">
                <van-sidebar v-model="active">
                    <van-sidebar-item :title="v.cat_name" v-for="(v, i) in list" :key="i" />
                </van-sidebar>
            </van-col>

            <!-- 右侧 -->
            <van-col span="17" style="height: 100%;overflow: auto;" class="right"  @scroll="scrollFun">
                <div v-for="(v, i) in list[active]?.children" :key="i">
                    <p>{{ v.cat_name }}</p>
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(val, int) in v.children" @click="tosearch(val.cat_name)">
                            <van-image
                                :src="val.cat_icon ? val.cat_icon : 'https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg'" />
                            <p>{{ val.cat_name }}</p>
                        </van-grid-item>
                    </van-grid>
                </div>
            </van-col>

        </van-row>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import headers from '@/components/headers.vue';
import { categoriesApi } from '@/api/api';

const active = ref(0)


//检测页面滚动的方法
const scrollFun=(e)=>{
    localStorage.setItem('listTop',e.target.scrollTop)
}

let list = ref([])
const categories = () => {
    categoriesApi().then((res) => {
        list.value = res.data.message
        setTimeout(()=>{
            document.querySelector('.right').scrollTop=localStorage.getItem('listTop');
        },100)
    })
}
categories()


//搜索
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const tosearch = (name) => {
    router.push({ path: "/search", query: { name: name } })
}
</script>

<style lang="scss" scoped>
.box {
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .main {
        flex: 1;
        display: flex;
        overflow: hidden;
    }
}
</style>